<template>
  <user-card-list :user-list="userList" :loading="loading"></user-card-list>
  <van-empty v-if="(!userList||userList.length<1)&&!loading" description="搜索结果为空"></van-empty>
</template>

<script setup lang="ts">

import {useRoute} from "vue-router";
import {onMounted, ref, watchEffect} from "vue";
import myAxios from "../plugins/myAxios.js";
import {Toast} from "vant";
import qs from 'qs';
import UserCardList from "../components/UserCardList.vue";

const route = useRoute();

const {tags} = route.query;

const userList = ref();

const loading = ref(true);

onMounted(async () => {
  loading.value = true;
  const userListData = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags
    },
    paramsSerializer: params => {
      return qs.stringify(params, {indices: false})
    }
  }).then(res => {
    return res?.data;
  }).catch(error => {
    Toast('请求失败');
  })

  if (userListData) {
    userListData.forEach(user => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
  loading.value = false;
})

</script>

<style scoped>

</style>
